<template>
  <div>
    <el-form
      ref="formRef"
      :model="goodsList"
    >
      <el-table
        :data="goodsList.items"
        element-loading-text="Loading"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
        style="margin-top: 10px"
      >
        <el-table-column
          align="center"
          :label="$t('message.sptp')"
          min-width="80"
          prop="avatar"
        >
          <template slot-scope="scope">
            <el-image
              fit="contain"
              :src="scope.row.picture"
              :preview-src-list="[scope.row.picture]"
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('message.spmc')"
          min-width="120"
          prop="goodName"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          :label="$t('message.txm')"
          prop="barCode"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column
          align="center"
          :label="$t('message.spfl')"
          show-overflow-tooltip
          prop="goodsClassifyName"
          min-width="80"
        />
        <el-table-column
          align="center"
          :label="$t('message.num')"
          prop="goodNum"
          min-width="120"
        >
          <template slot-scope="scope">
            <el-form-item
              :prop="'items.' + scope.$index + '.goodNum'"
              :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
            >
              <el-input
                v-model="scope.row.goodNum"
                :placeholder="$t('message.qsr')"
                @input="(val) => handleNameInput(val, scope.$index)"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :label="$t('message.spkc')"
          prop="realNum"
          min-width="80"
        />
        <el-table-column
          align="center"
          :label="$t('message.unit')"
          prop="goodUnit"
          min-width="80"
        />
      </el-table>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    goodsList: {
      type: Object,
      default: () => ({
        items: [],
      }),
    },
  },
  methods: {
    handleNameInput(value, index) {
    console.log("🚀 ~ handleNameInput ~ index:", index)
    console.log("🚀 ~ handleNameInput ~ value", value)

      if (value.startsWith('0') && value.length > 1) {
        value = value.substring(1);
      }
      this.goodsList.items[index].goodNum = value.replace(/[^0-9]/g, '');
    },
    async validateForm() {
      if (this.goodsList.items.length === 0) {
        this.$message.error('请添加商品');
        throw new Error('请添加商品');
      }
      await this.$refs.formRef.validate((valid) => {
        if (!valid) {
          this.$message.error('表格中有未填写项');
          throw new Error('表格中有未填写项');
        }
      });
      return this.goodsList;
    },
  },
};
</script>

<style lang="scss" scoped></style>
